<template>
    <div>
        <el-card style="margin: 10px 5px; height: 80vh;">
            <div style="align-items: center; text-align: left; font-weight: bolder; font-size: large;">相册列表</div>
            <div style="align-items: center; display: flex; margin-top: 10px;">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd"> 新建相册</el-button>
                <span style="margin-left: auto;">
                    <el-input v-model="albumsName" style="width: 200px; margin: 0 10px;"
                        placeholder="请输入相册名称"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="load(1)">搜索</el-button>
                </span>
            </div>
            <div v-for="(album, index) in albums" :key="index" class="image-container" >
                <img  :src="album.image" alt="Image" class="image" @click="handleAlbum(album)">
                <span class="icon-and-number">
                    <el-popconfirm title="确定删除相册吗?" @confirm="handleDelete(album.id)">
                        <i class="el-icon-more icon" slot="reference" style="cursor: pointer;"></i>
                     </el-popconfirm>
                </span>
                <span class="number">42</span>
            </div>
        </el-card>
        <el-dialog title="相册信息" :visible.sync="dialogVisible" width="35% " top="10vh">
            <el-form :model="form" label-width="80px" style="padding-right: 20px;" :rules="rules" ref="formRef">
                <el-form-Item label="相册名称" prop="name">
                    <el-input v-model="form.albumName" placeholder="" style="width: 200px;"></el-input>
                </el-form-Item>
                <el-form-Item label="相册描述" prop="disc">
                    <el-input v-model="form.disc" placeholder="" style="width: 200px;"></el-input>
                </el-form-Item>

                <el-form-Item label="上传封面" prop="image">
                    <el-upload class="upload-demo" :action="$baseUrl+'/upload'" :headers="{token:user.token}"
                        :show-file-list="false" drag :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="background" :src="background" class="avatar">
                        <div v-else> <i class="el-icon-upload" :class="icon"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </div>

                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-Item>
                <el-form-Item label="发布形式">
                    <template>
                        <el-radio v-model="radio" label='1'>公开</el-radio>
                        <el-radio v-model="radio" label='2'>私密</el-radio>
                    </template>
                </el-form-Item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    export default{
        data(){
            return{
                albums:[],
                albumsName:'',
                form:{},
                dialogVisible:false,
                user:JSON.parse(localStorage.getItem('user'||'{}')),
                background:'',
                icon:'',

                rules: {
                    disc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
                    

                },
                radio:'2'
            }
        },

        created() {
            this.load()
        },
        
        methods:{
            handleAlbum(album){
                this.$router.push({ path: '/photo', query:{mAlbum:JSON.stringify(album) } })
            },
            load(){
                this.$request.get('/album').then(res => {
                  this.albums=res.data
                })
            },
            handleAvatarSuccess(response,file,fileList) {
            console.log("1");
            console.log(response,file,fileList);
            this.background=response.data;
         },
         beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||'Image/png';

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG或 png 格式!');
        }
    },
            handleDelete(index) {
                console.log(index)
                this.$request.delete('/album/delete/' + index).then(res => {
                    if (res.code == '1') {
                        this.$message.success('操作成功')
                        this.load(1)
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            save() {
                this.$refs.formRef.validate((validate) => {
                    if (validate) {
                        this.form.status=this.radio
                        this.form.image=this.background
                        this.$request({
                            url:'/album/add',
                            method: 'POST',
                            data: this.form,
                        }).then(res => {
                            if (res.code == '1') {
                                this.$message.success('保存成功')
                                this.dialogVisible = false
                                this.load()
                            }
                            else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                })
            },
            handleAdd() {
                this.form = {}
                this.dialogVisible = true
            },
           
        }
    }
</script>

<style>

.el-upload-dragger img{
    max-width: 100%;
    max-height: 100%;
    }
    
    .image-container {
  position: relative;
  display: inline-block; 
  max-height: 100%;/* 或者你想要的其他布局方式 */
}

.image {
  height:  100px !important; /* 或者你想要的大小 */
  margin: 10px 10px !important; /* 防止图像下方有额外的空间 */
}

.icon-and-number {
  position: absolute; /* 绝对定位 */
  top: 0; /* 定位到图片的顶部 */
  left: 0; /* 定位到图片的左边，你可以根据需要调整 */
   /* 半透明的背景 */
  padding: 5px; /* 内边距 */ 
}

.icon {
    
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
  vertical-align: middle; /* 垂直居中对齐 */
  background-color: rgba(255, 255, 255, 0.7);
}

.number {
 position: absolute;
 bottom: 0;
 right: 0;
 padding: 0 9px 9px 0;/* 垂直居中对齐 */
 color:black;
}

</style>

